<template>
    <div class="maintenance-list">
        <el-row type="flex" justify="space-between">
          <el-form :inline="true" :model="formInline" class="demo-form-inline" @submit.native.prevent>
          <el-form-item v-if="hasFather">
            <div class="iconfont icon-return return-btn" @click="backFather" title="返回"></div>
          </el-form-item>
            <el-form-item>
                <el-select filterable @change="getList(1)" v-model="formInline.organizationId" placeholder="请选择业主单位">
                  <el-option
                    v-for="item in orgOptions"
                    :key="item.organizationId"
                    :label="item.shortName"
                    :value="item.organizationId">
                  </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
              <el-input 
              v-model.trim="formInline.serverId" 
              placeholder="请输入服务标识"
              @keyup.enter.native="getList(1)"
              clearable
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button class="form-search-btn" type="primary" @click="getList(1)">查询</el-button>
            </el-form-item>
          </el-form>
          <div class="more-btns">
            <el-button type="primary" @click="add()">新增</el-button>
          </div>
        </el-row>
        <el-table
          v-loading="loading"
          :data="tableData"
          ref="mainTable"
          style="width: 100%">
          <el-table-column
          label="序号"
          type="index"
          width="50">
          </el-table-column>
          <el-table-column
            prop="organizationName"
            label="联网单位">
          </el-table-column>
          <el-table-column
            prop="serverId"
            label="服务标识">
          </el-table-column>
          <el-table-column
            prop="name"
            label="版本名称">
          </el-table-column>
          <el-table-column
          prop="configPath"
          label="配置文件路径">
          </el-table-column>
          <el-table-column
          prop="lineControl"
          label="服务端zk路径">
          </el-table-column>
          <el-table-column
          prop="remarks"
          label="备注">
          </el-table-column>
          <el-table-column 
          label="操作">
            <template slot-scope="scope">
              <el-button  @click="add(scope.row)" type="text" size="small">编辑</el-button>
              <span class="dividing-line">|</span>
              <el-button  @click="del(scope.row)" type="text" size="small">删除</el-button>
              <span class="dividing-line">|</span>
              <el-button  @click="showUpgradeDialog(scope.row)" type="text" size="small">升级</el-button>
              <span class="dividing-line">|</span>
              <el-button  @click="showLog(scope.$index, scope.row)" type="text" size="small">日志</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          background
          @size-change="sizeChange"
          @current-change="pageChange"
          :current-page="formInline.currentPageIndex"
          :page-sizes="[10, 50, 100]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="formInline.currentPageTotal">
        </el-pagination>
        <el-dialog
            :close-on-click-modal="false"
            title="通讯服务器维护"
            width="600px"
            top='10vh'
            v-if="dialogFalg"
            :visible.sync="dialogFalg"
            v-dialogDrag
            @close="closeDialog">
            <edit-form :editInfo="editInfo" :updateId="formInline.updateId" :closeDialog="closeDialog"></edit-form>
        </el-dialog>
        <!-- 升级 -->
         <el-dialog
            :close-on-click-modal="false"
            title="升级"
            width="600px"
            top='10vh'
            v-if="dialogUpgrade"
            :visible.sync="dialogUpgrade"
            v-dialogDrag
            @close="closeDialogUpgrade">
            <up-form :editInfo="upInfo" :closeDialog="closeDialogUpgrade"></up-form>
        </el-dialog>
        <!-- 日志 -->
         <el-dialog
            :close-on-click-modal="false"
            title="查看日志"
            width="600px"
            top='10vh'
            v-if="dialogLog"
            :visible.sync="dialogLog"
            v-dialogDrag
            @close="closeDialogLog">
            <log-form :editInfo="logInfo" :closeDialog="closeDialogLog"></log-form>
        </el-dialog>
    </div>
</template>

<script>
import { getOrgList } from '@/api/org'
import EditForm from '../Dialog/PlatTransDeviceForm_list'
import UpForm from '../Dialog/PlatTransDeviceUpgradeForm_list'
import LogForm from '../Dialog/PlatTransDeviceLogForm_list'
import util from '@/utils/util'
import { viewUsage,delUsage} from '@/api/dcx'

export default {
    name: 'PlatTransDeviceList',
    components: {
         EditForm,
         UpForm,
         LogForm,
    },
    props: {
        pageInfo: {
            type: Object,
            required: false
        },
        hasFather: {
          type: Boolean,
          default () {
            return false
          }
        },
        backFather: {
            type: Function,
            default () {
                return ()=>{}
            }
        },
    },
    data() {
        return {
           formInline: {
            organizationId: 0,
            updateId: '',
            serverId: '',
            currentPageSize: 10,
            currentPageIndex: 1,
            currentPageTotal: 0
          },
          orgOptions: [{organizationId:0,shortName: "全部业主单位"}],
          tableData: [],//表格数据
          dialogFalg: false,//编辑弹窗
          dialogUpgrade: false,//升级弹窗
          dialogLog: false,//日志弹窗
          util:util,
          loading: false,
          editInfo: {  },// 编辑对应的表单信息
          upInfo: {  },// 升级
          logInfo: {  },// 日志
        }
    },
    created() {
        let infoObj = this.pageInfo
        if(infoObj.id) {//编辑
          this.formInline.updateId = infoObj.id
        }
        getOrgList({queryType: 0}).then((data)=>{
          this.orgOptions.push.apply(this.orgOptions,data.data);
        })
        this.getList()
    },
    methods: {
        sizeChange(val) {//页码切换
          this.formInline.currentPageIndex = 1;
          this.formInline.currentPageSize = val;
          this.getList() 
        },
        pageChange(val) {//翻页
          this.formInline.currentPageIndex = val;
          this.getList() 
        },
        getList(_pageIndex) {//获取列表
          if(_pageIndex){
            this.formInline.currentPageIndex = _pageIndex
          }
          this.loading =true;
          viewUsage({
            pageIndex: this.formInline.currentPageIndex -1,
            pageSize: this.formInline.currentPageSize,
            organizationId: this.formInline.organizationId,
            updateId: this.formInline.updateId,
            serverId: this.formInline.serverId.trim(),
          }).then((result) => {
            this.formInline.currentPageTotal = result.total;
            this.tableData = result.data;
            this.loading =false;
          }) 
        },
        /*新增和编辑*/
        add(row){
          this.dialogFalg = true
          this.editInfo = row||{}
        },
        closeDialog(refresh) {
          this.dialogFalg = false
          if(refresh) {
            this.getList(this.editInfo.id?'':1)
          }
        },
        /*升级*/
        showUpgradeDialog(row){
          this.dialogUpgrade = true
          this.upInfo = row||{}
        },
        closeDialogUpgrade(refresh){
          this.dialogUpgrade = false
          if(refresh) {
            this.getList(1)
          }
        },
        /*日志*/
        showLog(index, row) {
          this.dialogLog = true
          this.logInfo = row||{}
          //selectLog
        },
        closeDialogLog(refresh){
          this.dialogLog = false
        },
        del(row){
          let that = this
          if (row) {
            that.$confirm('确认删除吗?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning',
              roundButton: true
            }).then(() => {
              delUsage({id: row.id}).then(res => {
                if( res.status === 200) {
                  that.$message({
                    type: 'success',
                    message: '操作成功!'
                  })
                  that.getList(1) 
                }else{
                  that.$message.error(res.info)
                }
              })
            }).catch(() => {
            })
          }
        },
        
    }
}
</script>
